<!-- 快捷回复 -->

<template>
    <el-card class="reply">
        <div class="header">
            <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle @click="getQuickAnswerByShopId()"></el-button>
            <el-input class="inp" placeholder="请输入关键词语" prefix-icon="el-icon-search" v-model="input2">
            </el-input>
            <el-button @click="search(input2)" class="search">
                搜索
            </el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addlist()">添加快捷回复</el-button>
        </div>
        <div class="body">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column width="300px" prop="question" label="关键词">
                </el-table-column>
                <el-table-column width="auto" prop="answer" label="回复内容">
                </el-table-column>
                <el-table-column width="200px" label="设置操作">
                    <template slot-scope="{ row, $index }">
                        <el-button color="#3272FF" @click="postitem(row)" class="el-icon-edit-outline">
                        </el-button>
                                <el-button color="#3272FF" @click="deleteitem(row)" class="el-icon-delete" slot="reference"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 修改提示框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form>
                <el-form-item label="*关键词"><br />
                    <span>1.每个关键词最多5个字，最多可添加5个关键词. <br />2.该条设置中的关键词不能与已有设置中的关键词完全重复.</span>
                    <el-input placeholder='请输入' v-model="text.question"></el-input>
                    <span><i class="el-icon-message-solid"></i>关键词不超过20字</span>
                </el-form-item>
                <el-form-item label="评价后回复文案">
                    <el-input placeholder='请输入' v-model="text.answer"></el-input>
                    <span><i class="el-icon-message-solid"></i>关键词不超过20字</span>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="preservation()">确 定</el-button>

                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 添加快捷回复提示框 -->
        <el-dialog title="添加快捷回复提示框" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
            <el-form>
                <el-form-item label="关键词"><br />
                    <span>1.每个关键词最多5个字，最多可添加5个关键词. <br />2.该条设置中的关键词不能与已有设置中的关键词完全重复.</span>
                    <el-input type="textarea" maxlength="20" placeholder='请输入' v-model="form.question"></el-input>
                    <span><i class="el-icon-question"></i>关键词不超过20字</span>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" maxlength="300" placeholder='请输入' v-model="form.answer"></el-input>
                    <span><i class="el-icon-question"></i>关键词不超过300字</span>

                </el-form-item>

                <el-form-item>
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="preservation1(false)">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination style="margin-top:20px;text-align:center" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </el-card>

</template>

<script>

export default {
    name: 'reply',
    mounted() {

    },
    data() {

        return {
            //页码
            pageNumber: 1,
            //每页数量
            pageSize: 10,
            //总条数
            total: 0,
            title: '提示',
            text: {
                date: '',
                name: ''
            },
            input2: '',
            form: {},
            dialogVisible: false,
            dialogVisible1: false,
            tableData: []
        }
    },
    watch: {},
    created() {
        this.getQuickAnswerByShopId()
    },
    methods: {
        addlist() {
            this.dialogVisible1 = true,
                this.form = {}
        },
        search(searchText){
            this.getQuickAnswerByShopId(searchText)
      
        },
        async getQuickAnswerByShopId(searchText) {
            let res = await this.$API.kefu.getQuickAnswerByShopId({
                // shopId:
                pageNum: this.pageNumber,
                pageSize: this.pageSize,
                searchText
            })
            if (res.code == 200) {
                this.tableData = res.data.rows
                this.total = res.data.sumLine
            }
            console.log(res.data, 'lise4t');

        },
        async deleteitem(row) {
            console.log(row,'iddelet');
            let res = await this.$API.kefu.deleteQuickAnswerByIds({
                ids: row.id
            })
            if (res.code == 200) {
                this.$message("删除成功")
                this.getQuickAnswerByShopId()
            }
        },
        async preservation() {
            console.log(this.text, 'text');
            let res = await this.$API.kefu.addOrUpdateQuickAnswer({
                keyWord: this.text.question,
                quickAnswerId: this.text.id,
                replyContent: this.text.answer
            })
            if (res.code == 200) {
                this.$message('修改操作成功')
                this.getQuickAnswerByShopId()
            }
            this.dialogVisible = false
        },
        async preservation1(item) {

            let res = await this.$API.kefu.addOrUpdateQuickAnswer({
                keyWord: this.form.question,
                replyContent: this.form.answer
            })
            if (res.code) {
                this.$message('添加操作成功')
                this.getQuickAnswerByShopId()
            }
            this.dialogVisible1 = item

        },
        postitem(row) {
            this.text = row
            console.log(row, '打印row');
            this.dialogVisible = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getQuickAnswerByShopId();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageNumber = val;
            this.getQuickAnswerByShopId();
        }

    }
}
</script>
<style scoped>
.reply {
    margin: 10px;

    .header {
        .inp {
            width: 325px;
            height: 31px;
            /* background-color: #999999; */
        }

        .search {
            color: #3272FF;
            border-color: #3272FF;
        }
    }
}
</style>